<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>嗨伴推广系统</title>
	<meta name="description" content="Examples for creative website header animations using Canvas and JavaScript" />
	<meta name="keywords" content="header, canvas, animated, creative, inspiration, javascript" />
	<meta name="author" content="Codrops" />
	<!-- <link rel="stylesheet" href="static/css/bootstrap.css"> -->
	<link rel="stylesheet" href="static/css/inp1.css">
	<!-- <link rel="stylesheet" href="static/css/inp2.css"> -->
	<link rel="stylesheet" href="static/css/inp3.css">
	<link rel="stylesheet" type="text/css" href="static/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="static/css/demo.css" />
	<link rel="stylesheet" type="text/css" href="static/css/component.css" />
</head>
<style media="screen">
	/* .main-title {
		top: 100px;
	} */

	.tittop {
		top: 10% !important;
		transition: 1s;
	}

	.inp {
		top: 40% !important;
		border: 0 !important
	}

	.inp1 {
		top: 80%;
		border: #747981 solid 6px !important;
		width: 17em;
		padding: 50px 0;
		transition: 1s;
		color: #df6589;
		font-weight: bold;
	}

	.inp1:hover {
		background: #00badb;
		color: #fff;
		cursor: pointer;
	}

	#demo-canvas {
		float: left;
	}

	.tittop:hover {
		font-size: 50px;
		color: #00badb;
		border-color: #00badb;
	}
</style>

<body onselectstart="return false">
	<div class="container demo-3">
		<div class="content">
			<div id="large-header" class="large-header">
				<canvas id="demo-canvas"></canvas>
				<h1 class="main-title tittop"><span>嗨伴推广系统</span></h1>
				<section class="content bgcolor-4 main-title inp">
					<span class="input input--kuro inp">
					<input class="input__field input__field--kuro" type="text" id="input-7" />
					<label class="input__label input__label--kuro" for="input-7">
						<span class="input__label-content input__label-content--kuro sp7">用户名</span>
					</label>
					</span>
					<span class="input input--kuro inp">
					<input class="input__field input__field--kuro" type="password" id="input-8" />
					<label class="input__label input__label--kuro" for="input-8">
						<span class="input__label-content input__label-content--kuro sp8">密码</span>
					</label>
					</span>
				</section>
				<div class="main-title inp1" onclick="location='liusiyang.gitee.io/hbht/#/rrr?id='+document.getElementById('input-7').value;">登录</div>
			</div>

		</div>
	</div>
	<!-- /container -->
	<div style=" position:fixed;height:90px;width:100%;left:0;bottom:5px;z-index:999 ">
		<div class="footer-banner " style="width:728px; margin:0px auto "></div>
	</div>
	<script src="static/js/inp.js" charset="utf-8"></script>
	<script src="static/js/TweenLite.min.js "></script>
	<script src="static/js/EasePack.min.js "></script>
	<script src="static/js/demo-3.js "></script>
	<script src="http://www.yyyweb.com/demo/common/jquery.min.js "></script>
	<script type="text/javascript">
		$("#input-7").blur(function(event) {
			if ($(this).val() == '') {

				$(".sp7").html("请输入用户名")
				return
			}
			var ip7 = $(this).val()
			$(".sp7").html(ip7)
		})
		$("#input-8").blur(function(event) {
			if ($(this).val() == '') {

				$(".sp8").html("请输入密码")
				return
			}
			var ip8 = $(this).val()
			$(".sp8").html("password")
		})
	</script>

</body>

</html>